const path = require('path'),
  webpack = require('webpack'),
  CopyWebpack = require('copy-webpack-plugin'),
  MiniCSSExtract = require('mini-css-extract-plugin'),
  styles = require('./webpack.style.loaders');

const PROD = process.env.NODE_ENV === 'production';

const resolve = dir => path.resolve(process.cwd(), dir);

module.exports = {
  entry: {
    app: resolve('src/index.ts')
  },
  output: {
    path: resolve('public'),
    publicPath: '/',
    sourceMapFilename: '[name].map',
    chunkFilename: 'static/js/[name].[chunkhash:8].js',
    filename: 'static/js/[name].[hash:8].js'
  },
  module: {
    rules: [
      {
        test: /\.(js|ts|jsx|tsx)?$/,
        include: [resolve('src')],
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            ["@babel/preset-env", {
              targets: { ie: 9, },
              ignoreBrowserslistConfig: true,
              useBuiltIns: false,
              modules: false,
              exclude: ['transform-typeof-symbol'],
            }],
            ["@babel/preset-typescript"]
          ],
          plugins: [
            [
              "@babel/plugin-transform-runtime",
              {
                "corejs": false,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
              }
            ],
            ['@babel/plugin-syntax-dynamic-import'],
            ['@babel/plugin-proposal-decorators', { legacy: true }],
            ['@babel/plugin-proposal-class-properties', { loose: false }],
          ]
        }
      },
      ...styles,
      {
        test: /\.(eot|woff|woff2|ttf)(\?\S*)?$/,
        loader: 'url-loader',
        options: {
          name: 'assets/fonts/[name].[hash:8].[ext]',
          limit: 2048,
        }
      },
      {
        test: /\.(svg|png|jpe?g|gif)(\?\S*)?$/,
        loader: 'url-loader',
        options: {
          name: 'assets/images/[name].[hash:8].[ext]',
          limit: 2014,
        }
      }
    ]
  },
  resolve: {
    modules: ['node_modules', resolve('src')],
    extensions: ['.js', '.ts', '.tsx'],
    alias: {
      '@script': resolve('src/script'),
      '@utils': resolve('src/utils'),
      '@assets': resolve('src/assets'),
    }
  },
  context: __dirname,
  target: 'web',
  stats: 'errors-only',
  optimization: {
    minimize: PROD,
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        react: {
          name: 'vendor',
          test: /[\\/]node_modules\/(react|mobx)[\\/]/,
          priority: 1,
          chunks: 'all',
        },
        default: {
          name: 'common',
          minChunks: 2,
          chunks: 'all',
          priority: -10,
          reuseExistingChunk: true
        },
      }
    }
  },
  plugins: [
    new MiniCSSExtract({
      filename: 'static/css/[name].[contenthash].css',
    }),
    new webpack.ProvidePlugin({
      $ajax: [resolve('src/utils/request_tool.ts'), 'default'],
    }),
    new CopyWebpack([{
      from: resolve('favicon'),
      ignore: ['.*']
    }])
  ]
};
